<template>
  <div class="security-monitor">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <span>安全监控</span>
        </div>
      </template>
      <div class="content">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="登录安全" name="loginSecurity">
            <div class="login-security-section">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">{{ loginStats.todayAttempts }}</div>
                      <div class="stat-label">今日登录尝试</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">{{ loginStats.failedAttempts }}</div>
                      <div class="stat-label">失败尝试</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">{{ loginStats.successRate }}%</div>
                      <div class="stat-label">成功率</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">{{ loginStats.blockedAccounts }}</div>
                      <div class="stat-label">锁定账户</div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              
              <el-card style="margin-top: 20px;">
                <template #header>
                  <div class="card-header">
                    <span>异常登录记录</span>
                  </div>
                </template>
                <el-table :data="abnormalLogins" style="width: 100%">
                  <el-table-column prop="time" label="时间" width="180" />
                  <el-table-column prop="username" label="用户名" width="120" />
                  <el-table-column prop="ip" label="IP地址" width="150" />
                  <el-table-column prop="location" label="地理位置" width="120" />
                  <el-table-column prop="reason" label="异常原因" />
                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="scope.row.status === '已处理' ? 'success' : 'warning'">
                        {{ scope.row.status }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="150">
                    <template #default="scope">
                      <el-button size="small" @click="handleProcess(scope.row)">处理</el-button>
                      <el-button size="small" type="danger" @click="handleBlock(scope.row)">封禁</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="操作风险" name="operationRisk">
            <div class="operation-risk-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>高风险操作监控</span>
                  </div>
                </template>
                <el-table :data="riskyOperations" style="width: 100%">
                  <el-table-column prop="time" label="时间" width="180" />
                  <el-table-column prop="user" label="操作用户" width="120" />
                  <el-table-column prop="operation" label="操作类型" width="150" />
                  <el-table-column prop="resource" label="操作资源" />
                  <el-table-column prop="riskLevel" label="风险等级" width="100">
                    <template #default="scope">
                      <el-tag :type="getRiskLevelType(scope.row.riskLevel)">
                        {{ scope.row.riskLevel }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="scope.row.status === '已处理' ? 'success' : 'warning'">
                        {{ scope.row.status }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="150">
                    <template #default="scope">
                      <el-button size="small" @click="handleReview(scope.row)">审查</el-button>
                      <el-button size="small" type="danger" @click="handleAlert(scope.row)">告警</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="数据安全" name="dataSecurity">
            <div class="data-security-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>敏感数据访问监控</span>
                  </div>
                </template>
                <el-table :data="dataAccessLogs" style="width: 100%">
                  <el-table-column prop="time" label="访问时间" width="180" />
                  <el-table-column prop="user" label="访问用户" width="120" />
                  <el-table-column prop="dataType" label="数据类型" width="150" />
                  <el-table-column prop="accessType" label="访问类型" width="120" />
                  <el-table-column prop="sensitivity" label="敏感度" width="100">
                    <template #default="scope">
                      <el-tag :type="getSensitivityType(scope.row.sensitivity)">
                        {{ scope.row.sensitivity }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="purpose" label="访问目的" />
                  <el-table-column label="操作" width="120">
                    <template #default="scope">
                      <el-button size="small" @click="handleAudit(scope.row)">审计</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="异常检测" name="anomalyDetection">
            <div class="anomaly-detection-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>系统异常行为检测</span>
                  </div>
                </template>
                <el-table :data="anomalies" style="width: 100%">
                  <el-table-column prop="time" label="检测时间" width="180" />
                  <el-table-column prop="type" label="异常类型" width="150" />
                  <el-table-column prop="description" label="描述" />
                  <el-table-column prop="severity" label="严重程度" width="100">
                    <template #default="scope">
                      <el-tag :type="getSeverityType(scope.row.severity)">
                        {{ scope.row.severity }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="scope.row.status === '已处理' ? 'success' : 'warning'">
                        {{ scope.row.status }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="150">
                    <template #default="scope">
                      <el-button size="small" @click="handleInvestigate(scope.row)">调查</el-button>
                      <el-button size="small" type="danger" @click="handleMitigate(scope.row)">缓解</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const activeTab = ref('loginSecurity')

// 登录统计数据
const loginStats = ref({
  todayAttempts: 1247,
  failedAttempts: 23,
  successRate: 98.2,
  blockedAccounts: 2
})

// 异常登录记录
const abnormalLogins = ref([
  {
    time: '2023-06-15 14:30:22',
    username: 'user123',
    ip: '192.168.1.100',
    location: '北京',
    reason: '多次密码错误',
    status: '未处理'
  },
  {
    time: '2023-06-15 13:45:11',
    username: 'admin',
    ip: '203.156.78.90',
    location: '境外',
    reason: '异地登录',
    status: '已处理'
  }
])

// 高风险操作
const riskyOperations = ref([
  {
    time: '2023-06-15 14:20:05',
    user: 'admin',
    operation: '删除用户',
    resource: '用户管理',
    riskLevel: '高',
    status: '未处理'
  },
  {
    time: '2023-06-15 13:30:45',
    user: 'user123',
    operation: '批量导出',
    resource: '客户数据',
    riskLevel: '中',
    status: '已处理'
  }
])

// 数据访问日志
const dataAccessLogs = ref([
  {
    time: '2023-06-15 14:15:33',
    user: 'auditor',
    dataType: '财务数据',
    accessType: '查看',
    sensitivity: '高',
    purpose: '审计检查'
  },
  {
    time: '2023-06-15 13:50:22',
    user: 'manager',
    dataType: '客户信息',
    accessType: '导出',
    sensitivity: '中',
    purpose: '业务分析'
  }
])

// 异常行为
const anomalies = ref([
  {
    time: '2023-06-15 14:25:18',
    type: '异常流量',
    description: '检测到异常网络流量模式',
    severity: '高',
    status: '未处理'
  },
  {
    time: '2023-06-15 13:40:05',
    type: '异常访问',
    description: '用户在非工作时间访问敏感数据',
    severity: '中',
    status: '已处理'
  }
])

// 方法
const handleProcess = (row: any) => {
  ElMessage.success(`已处理 ${row.username} 的异常登录`)
  row.status = '已处理'
}

const handleBlock = (row: any) => {
  ElMessage.warning(`已封禁 ${row.username} 的账户`)
  row.status = '已处理'
}

const handleReview = (row: any) => {
  ElMessage.info(`正在审查 ${row.user} 的操作`)
}

const handleAlert = (row: any) => {
  ElMessage.warning(`已发送告警通知`)
}

const handleAudit = (row: any) => {
  ElMessage.info(`正在审计 ${row.user} 的数据访问`)
}

const handleInvestigate = (row: any) => {
  ElMessage.info(`正在调查 ${row.type} 异常`)
}

const handleMitigate = (row: any) => {
  ElMessage.success(`已缓解 ${row.type} 异常`)
  row.status = '已处理'
}

// 工具方法
const getRiskLevelType = (level: string) => {
  switch (level) {
    case '高': return 'danger'
    case '中': return 'warning'
    case '低': return 'success'
    default: return 'info'
  }
}

const getSensitivityType = (level: string) => {
  switch (level) {
    case '高': return 'danger'
    case '中': return 'warning'
    case '低': return 'success'
    default: return 'info'
  }
}

const getSeverityType = (level: string) => {
  switch (level) {
    case '高': return 'danger'
    case '中': return 'warning'
    case '低': return 'success'
    default: return 'info'
  }
}
</script>

<style scoped>
.security-monitor {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.stat-card {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}
</style>